<template>
  <intro-view :usage="usage">
    <ul>
      <li>
        <button @click="$refs['slideLeft'].show()">left</button>
        <ui-slide ref="slideLeft">
          <button @click="$refs['slideLeft'].close()">Im from left</button>
        </ui-slide>
        <button @click="$refs['slideLeftMask'].show()">left&mask</button>
        <ui-slide ref="slideLeftMask" :mask="true">
          <button @click="$refs['slideLeftMask'].close()">Im from left&mask</button>
        </ui-slide>
        <button @click="$refs['slideLeftMaskMaskShow'].show()">left&mask&maskShow</button>
        <ui-slide ref="slideLeftMaskMaskShow" :mask="true" :mask-show="true">
          <button @click="$refs['slideLeftMaskMaskShow'].close()">Im from left&mask&maskShow</button>
        </ui-slide>
        <button @click="$refs['slideLeftMaskMaskLock'].show()">left&mask&maskLock</button>
        <ui-slide ref="slideLeftMaskMaskLock" :mask="true" :mask-lock="true">
          <button @click="$refs['slideLeftMaskMaskLock'].close()">Im from left&mask&maskLock</button>
        </ui-slide>
        <button @click="$refs['slideLeftFull'].show()">left&full</button>
        <ui-slide ref="slideLeftFull" :full="true">
          <button @click="$refs['slideLeftFull'].close()">Im from left & fullPage</button>
        </ui-slide>
      </li>
      <li>
        <button @click="$refs['slideRight'].show()">right</button>
        <ui-slide ref="slideRight" from="right">
          <button @click="$refs['slideRight'].close()">Im from right</button>
        </ui-slide>
        <button @click="$refs['slideRightFull'].show()">right&full</button>
        <ui-slide ref="slideRightFull" from="right" full>
          <button @click="$refs['slideRightFull'].close()">Im from right & fullPage</button>
        </ui-slide>
      </li>
      <li>
        <button @click="$refs['slideTop'].show()">top</button>
        <ui-slide ref="slideTop" from="top">
          <button @click="$refs['slideTop'].close()">Im from top</button>
        </ui-slide>
        <button @click="$refs['slideTopOnlyContent'].show()">top with Bg Opacity</button>
        <ui-slide ref="slideTopOnlyContent" from="top" contentBgColor>
          <div style="margin-top: 30px; text-align: center">
            <button @click="$refs['slideTopOnlyContent'].close()">from top 提示</button>
          </div>
        </ui-slide>
      </li>
      <li>
        <button @click="$refs['slideBottom'].show()">bottom</button>
        <ui-slide ref="slideBottom" from="bottom">
          <button @click="$refs['slideBottom'].close()">Im from bottom</button>
        </ui-slide>
        <button @click="$refs['slideBottomFull'].show()">bottom&full</button>
        <ui-slide ref="slideBottomFull" from="bottom" full>
          <button @click="$refs['slideBottomFull'].close()">Im from bottom</button>
        </ui-slide>
      </li>
    </ul>
  </intro-view>
</template>

<script>
  import usage from './usage.md'
  export default {
    data () {
      return {
        usage
      }
    }
  }
</script>

<style scoped>
  li {
    padding: 5px;
    border-bottom: 1Px solid #f00;
  }
</style>
